<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>欢迎</title>
    <%@ include file="head.jsp"%>
  </head>
  <body>
  <div id="app">
    <div class="container-fluid" >
      <div class="row">
        <div class="col-3">
          <img src="./assets/logo.png" class="m-auto card-img-top" alt="logo" style="width: 200px">
        </div>
      </div>
      <div class="row">
        <div class="col-6 offset-3">
          <div class="card full-width" style="margin-top: 140px;">
            <div class="btn-group full-width text-center" role="group">
              <button type="button" class="btn btn-light" autofocus @click="changeTab(1)">登录</button>
              <button type="button" class="btn btn-light" @click="changeTab(2)">注册</button>
            </div>
<!--            登录表单-->
            <div class="card-body" v-if="tabIndex===1">
              <form action="${pageContext.request.contextPath}/userLogin" method="post">
                <div class="form-group">
                  <label for="login-username">用户名</label>
                  <input
                          type="text"
                          class="form-control"
                          id="login-username"
                          name="lusername"
                          maxlength="20"
                          required
                  >
                </div>
                <div class="form-group">
                  <label for="login-password">密码</label>
                  <input
                          type="password"
                          class="form-control"
                          id="login-password"
                          name="lpassword"
                          maxlength="16"
                          required
                  >
                </div>
                <button type="submit" class="ml-auto text-right btn btn-primary">登录</button>
              </form>
            </div>
<!--            注册表单-->
            <div class="card-body" v-if="tabIndex===2">
              <form action="${pageContext.request.contextPath}/userReg" method="post">
                <div class="form-group">
                  <label for="username">用户名</label>
                  <input
                          type="text"
                          class="form-control"
                          id="username"
                          name="username"
                          maxlength="16"
                          required
                          v-model="username"
                  >
                  <small class="form-text text-muted">{{usernameLength}}/16</small>
                </div>
                <div class="form-group">
                  <label for="nickname">昵称</label>
                  <input
                          type="text"
                          class="form-control"
                          id="nickname"
                          name="nickname"
                          maxlength="16"
                          required
                          v-model="nickname"
                  >
                  <small class="form-text text-muted">{{nicknameLength}}/16</small>
                </div>
                <div class="form-group">
                  <label for="password">密码</label>
                  <input
                          type="password"
                          class="form-control"
                          id="password"
                          name="password"
                          maxlength="16"
                          required
                          v-model="password"
                  >
                  <small class="form-text text-muted">{{passwordLength}}/16</small>
                </div>
                <div class="form-group">
                  <label for="repassword">确认密码</label>
                  <input
                          type="password"
                          class="form-control"
                          id="repassword"
                          name="repassword"
                          maxlength="16"
                          required
                          v-model="rePassword"
                  >
                  <small class="form-text text-muted">{{rePasswordLength}}/16</small>
                </div>
                <button type="submit" class="ml-auto text-right btn btn-primary">注册</button>
              </form>
            </div>
          </div>

          <%!
            String msg;
          %>
          <%
            request.setCharacterEncoding("UTF-8");
            msg = (String) request.getAttribute("msg");
            if (msg != null && !"".equals(msg)) {
          %>

          <div class="alert alert-danger alert-dismissible fade show mt-5" role="alert">
            <span><%=msg%></span>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <%
            }
          %>
        </div>
      </div>
    </div>
  </div>
  <script >
    let app = new Vue({
      el: '#app',
      data: {
        tabIndex:1,
        username:'',
        nickname:'',
        password:'',
        rePassword:'',
      },
      methods:{
        changeTab:function (tab){
          this.tabIndex = tab
        }
      },
      computed: {
        nicknameLength: function () {
          return this.nickname.length
        },
        usernameLength: function () {
          return this.username.length
        },
        passwordLength: function () {
          return this.password.length
        },
        rePasswordLength: function () {
          return this.rePassword.length
        },
      },
    })
  </script>
  </body>
</html>
